<script type="text/ng-template" id="list.html"><ul dnd-list="list">
            <li ng-repeat="item in list"
                dnd-draggable="item"
                dnd-effect-allowed="move"
                dnd-moved="list.splice($index, 1)"
                dnd-selected="$ctrl.models.selected = item"
                ng-class="{selected: $ctrl.models.selected === item}"
                ng-include="item.type + '.html'">
            </li>
        </ul></script><script type="text/ng-template" id="container.html"><div class="container-element box box-blue">
            <h3>Container {{item.id}}</h3>
            <div class="column" ng-repeat="list in item.columns" ng-include="'list.html'"></div>
            <div class="clearfix"></div>
        </div></script><script type="text/ng-template" id="item.html"><div class="item">Item {{item.id}}</div></script><div class="col-md-10"><div class="row"><div ng-repeat="(zone, list) in $ctrl.models.dropzones" class="col-md-6"><div class="dropzone box box-yellow"><h3>Dropzone {{zone}}</h3><div ng-include="'list.html'"></div></div></div></div><div view-source="nested"></div></div><div class="col-md-2"><div class="toolbox box box-grey box-padding"><h3>New Elements</h3><ul><li ng-repeat="item in $ctrl.models.templates" dnd-draggable="item" dnd-effect-allowed="copy" dnd-copied="item.id = item.id + 1"><button type="button" class="btn btn-default btn-lg" disabled="disabled">{{item.type}}</button></li></ul></div><div ng-if="$ctrl.models.selected" class="box box-grey box-padding"><h3>Selected</h3><strong>Type: </strong>{{$ctrl.models.selected.type}}<br><input type="text" ng-model="$ctrl.models.selected.id" class="form-control" style="margin-top: 5px"></div></div>